<template>
  <div class="eachrts-wrapper">
    <div :id="pieId" style="width: 434px; height: 331px"></div>
  </div>
</template>
<script>
export default {
  name: "PieCharts",
  props: {
    title: {
      type: String,
      default: function () {
        return "";
      },
    },
    mapData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    isError:{
      type: Boolean,
      default: function () {
        return false;
      },
    }
    // pieId:{
    //   type: String,
    //   default: function () {
    //     return "";
    //   },
    // }
  },
  data() {
    return {
      pieId: `pieId${Math.random(0,1)}`
    };
  },
  watch:{
    mapData:{
      handler:function(val){
        this.initCharts()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  methods: {
    initCharts() {
      let charts = this.$echarts.init(document.getElementById(this.pieId));
      const option = {
        title: {
          text: this.title,
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "16",
            fontWeight: 'bolder'
          },
        },
        color: [
          "#3ba272",
          "#91cc75",
          "#ff0000",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        legend: {
          orient: "vertical",
          left: "left",
          top: "middle",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.mapData,
            itemStyle:{
               normal:{
                label:{
                  show:true,
                  formatter:'{b} : {c}个'
                }
              }
            }
          },
        ],
      };
      if(this.isError) {
        option.color[0] = '#fc8452'
      }
      charts.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped></style>
